import React, {Component} from 'react';
import {Button, Checkbox} from 'tinper-bee';
import './index.less';

export default class PresetTemplate extends Component {
    handlerChooseIndustry = (key) => {
        let initData = this.state.data;
        let typeContent = initData.filter((item) => {
            if (item.pkIndustry === key) {
                return item
            }
        })
        this.setState({
            chooseIndustryKey: key,
            typeData: typeContent[0]
        });
    }
    handlerWatchTemplate = (key, name) => {
        sessionStorage.setItem('industryTypeName', name);
        sessionStorage.setItem('industryTypeKey', key);
        if (this.props.qualityTmpFlag) {
            sessionStorage.setItem('industryTypeFlag', true);
        }
        let url = window.location.href;
        let urlArray = url.split('//')[1].split('/');
        window.open('http://' + urlArray[0] + '/' + 'showtemplate.html')
    };
    handlerChangeCheck = (key) => {
        this.props.savePkType(key);
        this.state.data.forEach((item, index) => {
            item.typeVOS.forEach((item, index) => {
                if (item.pkType === key) {
                    if (item['checked']) {
                        item['checked'] = false;
                    } else {
                        item['checked'] = true;
                    }
                }
            })
        })
    };

    constructor(props) {
        super(props);
        this.state = {
            data: this.props.inherData,
            typeData: this.props.inherData[0] || {'typeVOS': []},
            chooseIndustryKey: this.props.inherData[0] ? this.props.inherData[0].pkIndustry : '',
            choosePkType: []
        }
    }
    componentWillUnmount = () => {
        sessionStorage.removeItem('industryTypeFlag');
        sessionStorage.removeItem('industryTypeName');
        sessionStorage.removeItem('industryTypeKey');
    };

    render() {
        let _me = this;
        return (
            <div className="u-presetpl">
                <p>行业：</p>
                <div className="industry__container clearfix">
                    {
                        this.state.data.map((item) =>
                            <a href="javascript:;"
                               className={item.pkIndustry === _me.state.chooseIndustryKey ? 'active' : ''}
                               onClick={() => {
                                   this.handlerChooseIndustry(item.pkIndustry)
                               }}>
                                {item.industryName}</a>
                        )
                    }
                </div>
                <p>类型：(可多选) </p>
                <div className="type__container">
                    <ul className="clearfix">
                        {
                            _me.state.typeData.typeVOS.map((item) =>
                                <li className="clearfix" style={{width: '100%'}}>
                                    <a href="javascript:;" className="check">
                                        <Checkbox colors="info"
                                                  checked={item.checked}
                                                  onChange={() => {
                                                      this.handlerChangeCheck(item.pkType)
                                                  }}></Checkbox>
                                        <span className="check--text">
                                            {item.typeName}
                                        </span>
                                    </a>
                                    <a href="javascript:;" className="pre--look"
                                           onClick={() => {
                                               this.handlerWatchTemplate(item.pkType, item.typeName)
                                           }}>
                                        <span className="uf-pre">预览</span>
                                    </a>
                                </li>
                            )
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
